<template>
  <div class="Person">
    <el-row>
      <!-- 搜索框 -->
      <el-col class="hidden-xs-only">
        <!-- 导航 -->
        <div id="top_nav" style="display:flex;">
          <!-- 面包削 -->
          <!-- <div id="top_nav_local">
            <el-breadcrumb separator="/" class="top_nav_bread">
              <el-breadcrumb-item
                v-for="item in levelList"
                :key="item.path"
                :to="item.path"
              >{{item.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>-->
          <!-- 搜索 -->
          <el-row style="display:flex;position: absolute;right:0">
            <el-input
              size="mini"
              placeholder="请输入内容"
              v-model="search"
              clearable
              class="search_input"
            ></el-input>
            <el-button icon="el-icon-search" style="border:0" circle @click="searchOrder()"></el-button>
          </el-row>
        </div>
      </el-col>
      <!-- 侧边栏 -->
      <el-col :xs="23" :sm="6" :md="6" :lg="6" :xl="6" :push="1" class="hidden-xs-only">
        <ul class="person_nav">
          <span>我的订单</span>
          <hr />
          <router-link to="/person/PersonOrder" tag="li" active-class="router_active">全部订单</router-link>
          <router-link
            :to="{path:'/person/PersonIngOrder',query: { orderState:'正在进行'}}"
            tag="li"
            active-class="router_active"
            exact
          >正在进行</router-link>
          <router-link
            :to="{path:'/person/PersonIngOrder',query: { orderState:'已完成'}}"
            tag="li"
            active-class="router_active"
            exact
          >已完成</router-link>
          <span>个人中心</span>
          <hr />
          <router-link to="/person/PersonInfo" tag="li" active-class="router_active">用户信息</router-link>
          <router-link to="/person/PersonCollect" tag="li" active-class="router_active">我的收藏</router-link>
          <router-link to="/person/PersonMessage" tag="li" active-class="router_active">我的评价</router-link>
          <span>管理中心</span>
          <hr />
          <router-link to="/person/PersonUpdPwd" tag="li" active-class="router_active">修改密码</router-link>
          <!-- <router-link to="/person/PersonIdCard" tag="li" active-class="router_active">身份证验证</router-link> -->
        </ul>
      </el-col>
      <el-col class="hidden-sm-and-up">
        <el-button
          @click="drawer = true"
          icon="el-icon-caret-right"
          circle
          style="position:fixed;left:0;margin-top:50px;margin-left: -16px;z-index:100;background:rgba(0, 0, 0,0.3);"
        ></el-button>
        <el-drawer title="导航" :visible.sync="drawer" :direction="direction">
          <ul class="centerbody_bottom_left_ul">
            <span>我的订单</span>
            <li>
              <a href="/index/person/PersonOrder" @click.prevent="GoPersonOrder">全部订单</a>
            </li>
            <li>
              <a href="/index/person/PersonIngOrder" @click.prevent="GoPersonIngOrder">正在进行</a>
            </li>
            <li>
              <a href="/index/person/PersonIngOrder" @click.prevent="GoPersonOverOrder">已完成</a>
            </li>
            <li>
              <a
                href="/index/person/PersonCarSharingOrder"
                @click.prevent="GoPersonCarSharingOrder"
              >拼车订单</a>
            </li>
            <span>个人中心</span>
            <li>
              <a href="/index/person/PersonInfo" @click.prevent="GoPersonInfo">用户信息</a>
            </li>
            <li>
              <a href="/index/person/PersonCollect" @click.prevent="GoPersonCollect">我的收藏</a>
            </li>
            <li>
              <a href="/index/person/PersonMessage" @click.prevent="GoPersonMessage">我的评价</a>
            </li>
            <span>管理中心</span>
            <li>
              <a href="/index/person/PersonUpdPwd" @click.prevent="GoPersonUpdPwd">修改密码</a>
            </li>
          </ul>
        </el-drawer>
      </el-col>
      <!-- 显示的数据 -->
      <el-col :xs="23" :sm="16" :md="15" :lg="16" :xl="16" :push="1">
        <div class="centerbody_bottom_right">
          <router-view></router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderState: "",
      drawer: false,
      direction: "ltr",
      levelList: [],
      search: "",
      imgurl: "",
      headpic: "",
      userintro: "",
      userName: ""
    };
  },
  inject: ["reload"],
  created() {
    this.getBreadcrumb();
    this.$axios
      .post("http://localhost:3000/personal/ShowUser")
      .then(res => {
        console.log(res.data.data[0]);
        this.imgurl = res.data.data[0].headpic;
        this.headpic = require("../../../routproj/public/upload/" +
          this.imgurl);
        this.userintro = res.data.data[0].intro;
        this.userName = res.data.data[0].userName;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
  },
  mounted() {
    console.log("当前路由的名字", this.$route.name);
  },

  methods: {
    //面包屑
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name);
      const first = matched[0];
      if (
        first &&
        first.name.trim().toLocaleLowerCase() !== "person".toLocaleLowerCase()
      ) {
        matched = [{ path: "person", meta: { title: "个人中心" } }].concat(
          matched
        );
      }
      this.levelList = matched;
    },
    //更改用户简介
    updIntro() {
      this.$axios
        .put("http://localhost:3000/personal/UpdIntro", {
          intro: this.userintro
        })
        .then(res => {
          alert("信息修改成功");
        })
        .catch(err => {
          console.log("错误信息：", err);
        });
    },
    changeHeadPic() {
      this.$router.push({
        name: "UpdHeadPic"
      });
    },
    searchOrder: function() {
      this.reload();
      this.$router.push({
        name: "SearchOrder",
        query: { orderId: this.search }
      });
    }
  },
  watch: {
    $router() {
      this.getBreadcrumb();
    }
  }
};
</script>
<style >
.router_active {
  transition: all 400ms ease 0s;
  transform: translate(10px);
  background-color: rgba(51, 51, 212, 1);
  box-shadow: 3px -3px 5px rgba(49, 60, 223, 0.5);
  color: #fff;
}
* {
  margin: 0;
  padding: 0;
}

#centerbody {
  width: 80%;
  margin: 0 auto;
  margin-top: 10px;
}
.Person {
  margin-bottom: 100px;
  margin-top: 10px;
}

a {
  text-decoration: none;
  color: black;
}

ul {
  list-style: none;
}

#centerbody_top {
  width: 100%;
  height: 356px;
}

#top_header {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

#top_header_bg {
  width: 100%;
  height: 200px;
  background: url("../assets/Person/beijing.jpeg") bottom;
  background-size: cover;
  position: absolute;
  z-index: 1;
}
#top_header_black {
  width: 100%;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

#top_header_container {
  width: 100%;
  height: 100px;
  position: absolute;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
  bottom: 0;
}

#top_header_container_box {
  height: 100px;
  margin: 0 0 0 20px;
  display: inline-block;
}

#top_header_container_phpto {
  float: left;
  position: relative;
  width: 81px;
  height: 81px;
  padding: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
}

#top_header_container_phpto img {
  width: 81px;
  height: 81px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

#top_header_namei {
  float: left;
  margin: 10px 0 0 20px;
}

#top_header_container_username {
  margin-top: -5px;
  height: 28px;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  vertical-align: text-bottom;
}

#top_header_container_username h3 {
  font-size: 22px;
}

#top_header_container_intro {
  margin-top: 8px;
  text-align: center;
  color: #fff;
  line-height: 18px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

#top_header_container_intro input {
  color: #d6dee4;
  text-decoration: none;
  background-color: transparent;
  border: none;
}

#top_nav {
  height: 40px;
  background-color: #fff;
  margin: 0 40px 16px;
  /* border: 1px solid rgba(0, 0, 0, 0.15); */
  /* box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); */
  position: relative;
}

.top_nav_bread {
  margin: 5px;
  margin-top: 10px;
}

.search_input {
  height: 23px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 10px;
}
.top_nav_box {
  width: 60%;
  height: 40px;
  margin: 0 auto;
}

.top_nav_ul {
  width: 100%;
  height: 40px;
  display: flex;
}

.top_nav_ul li {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
  flex: 1;
  cursor: pointer;
}

.top_nav_ul li a {
  text-decoration: none;
  border: 1px solid transparent;
  color: black;
}

.top_nav_ul li a:hover {
  color: blue;
}

#centerbody_bottom {
  width: 100%;
  height: 100%;
  display: flex;
}

.person_nav {
  margin-right: 50px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}

.person_nav > span {
  font-size: 18px;
  font-weight: 600;
  display: block;
  height: 40px;
  line-height: 40px;
  margin-top: 5px;
}

.person_nav > span:nth-child(n + 2) {
  margin-top: 10px;
}

.person_nav > hr {
  margin-top: 0px;
  margin-bottom: 0px;
  width: 200px;
  margin-left: 50px;
}

.person_nav > li {
  cursor: pointer;
  height: 48px;
  line-height: 48px;
  padding-top: 6px;
}

.person_nav > li:nth-last-child(1) {
  margin-bottom: 10px;
}
</style>
